<template>
  <view>
    <u-navbar title="保养工单" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <view class="flex flex-column justify-between pb-100" id="container" :style="{minHeight:`calc(100vh - ${top}px)`}">
      <view class="pt-20">
        <sub-title title="保养概况"></sub-title>
        <view class="m-lr-20">
          <view class="m-lr-20 flex align-center justify-between mt-20 color-888888 fz-30 lh-42">
            <text>工单开始时间</text>
            <text>{{ workOrderInfo.workOrderStartDate || '-' }} {{ workOrderInfo.workOrderStartTime || '-'}}</text>
          </view>
          <view class="m-lr-20 flex align-center justify-between mt-20 color-888888 fz-30 lh-42">
            <text>工单截止时间</text>
            <text>{{ workOrderInfo.workOrderEndDate || '-'}} {{ workOrderInfo.workOrderEndTime || '-'}}</text>
          </view>
          <view class="m-lr-20 flex align-center justify-between mt-20 color-888888 fz-30 lh-42">
            <text>保养开始时间</text>
            <text>{{ startTime || '-' }}</text>
          </view>
          <view class="m-lr-20 flex justify-between mt-20 color-888888 fz-30 lh-42">
            <text class="w-250">保养工程师</text>
            <view class="flex1 text-right">
              <text>{{ workOrderInfo.mroUser }}</text>
            </view>
          </view>
          <view class="flex align-center justify-between w-full mt-20 p-lr-20 bg-E9F8FF br-10">
            <view class="flex-1">
              <view class="h-100 w-full flex align-center justify-between">
                <text class="ml-20 fz-32 lh-33">开启分页</text>
                <u-switch :value="$store.getters.paginationUseful" @input="$store.commit('SET_USEFUL', $event)"/>
              </view>
              <view class="h-100 w-full flex align-center justify-between" v-if="$store.getters.paginationUseful">
                <text class="ml-20 fz-32 lh-33">每页设备数</text>
                <u-number-box bg-color="#E9F8FF"
                              :min="1"
                              :max="10"
                              :step="1"
                              :value="$store.getters.paginationPageSize"
                              @input="$store.commit('SET_PAGE_SIZE', $event)"/>
              </view>
            </view>
          </view>
          <view class="mt-50">
            <view v-for="(roomListItem,roomListItemIndex) in roomList"
                  :key="roomListItemIndex"
                  class="p-tb-18 flex align-center bg-E9F8FF br-10 justify-between mb-30 p-lr-20"
                  @tap="toRoomCheck(roomListItem.roomId)">
              <view class="flex justify-center bg-19BE6B br-32 min-w-200 max-w-460 p-lr-22 p-tb-8">
                <view class="lh-48 color-fff font-bold text-ellipsis-2">
                  <text>{{ roomListItem.roomName }}</text>
                </view>
              </view>
              <view class="flex align-center h-full fz-34 lh-48">
                <text
                    :class="[ !roomListItem.doneNum ? 'color-2D8CF0':roomListItem.isAllDone?'color-19BE6B':'color-FF6262']"
                >
                  {{showNum(roomListItem.doneNum, roomListItem.totalNum)}}
                </text>
                <image class="w-14 h-28 ml-10" src="@/static/images/common/toPath.png"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="!isStarted" class="w-250 h-80 br-10 bg-19BE6B color-fff fz-30 text-center lh-80 margin-0-auto" @tap="starkCheck">
        <text>开始保养</text>
      </view>
      <view v-else class="w-250 h-80 br-10 bg-19BE6B color-fff fz-30 text-center lh-80 margin-0-auto" @tap="confirm">
        <text>保养完成</text>
      </view>
    </view>

    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="isModalShow">
      <view class="min-h-150 flex align-center justify-center font-bold">
        <image class="mr-20 w-38 h-38" src="@/static/images/common/error.png"></image>
        <view class="oh break-all max-w-400 p-tb-20">{{modalContent}}</view>
      </view>
    </u-modal>

    <!-- 保养完成遮罩层 -->
    <u-mask :show="isShowMask" :mask-click-able="false">
      <view class="flex justify-center align-center h-full color-fff fz-32 font-bold">
        <text>提交中...</text>
        <u-loading mode="circle"></u-loading>
      </view>
    </u-mask>
  </view>
</template>

<script>
import subTitle from "@/components/SubTitle/SubTitle";
import getNavBarHeight from "@/mixins/getNavBarHeight";
import {listWorkOrderDevice} from "@/api/maintenance/workOrderDevice";
import {workOrderInfo, workOrderStart, workOrderFinish} from "@/api/maintenance/task";
export default {
  name: "startMaintenance",
  components: {subTitle},
  mixins:[getNavBarHeight],
  onLoad(options){
    this.workOrderId = options.workOrderId
    this.hospitalId = options.hospitalId
  },
  onShow(){
    this.doQuery()
  },
  data(){
    return {
      workOrderInfo:{},
      workOrderId:'',
      startTime: '',
      roomList: [],
      isStarted:false,
      isModalShow:false,
      modalContent: '',
      //设备原始列表
      deviceListoriginalData: [],
      hospitalId:null,
      isShowMask: false,
    }
  },
  watch: {
    deviceListoriginalData(newValue) {
      this.roomList = newValue.reduce((pre, next) => {
        let temp = pre.find(item => item.roomId === next.roomId)
        if (temp) {
          temp.equipmentList.push(next)
        } else {
          pre.push({roomId: next.roomId, roomName: next.roomName, equipmentList: [next]})
        }
        return pre
      }, [] )
      this.roomList.forEach(roomListItem => {
        roomListItem.totalNum = roomListItem.equipmentList.reduce((pre,next) => {
          return pre + next.projectList.length
        },0)
        roomListItem.doneNum = roomListItem.equipmentList.reduce((pre,next) => {
          let temp = next.projectList.reduce((standardListPre,standardListnext) => {
            if(standardListnext.result){
              standardListPre++
            }
            return standardListPre
          },0)
          return pre + temp
        },0)
        roomListItem.isAllDone = roomListItem.totalNum === roomListItem.doneNum
      })
    }
  },
  methods: {
    doQuery() {
      workOrderInfo(this.workOrderId).then(res => {
        this.workOrderInfo = res.data || {}
        this.isStarted = res.data?.status == 3
        this.startTime = res.data?.startTime
      })
      listWorkOrderDevice({workOrderId: this.workOrderId}).then(res => {
        this.deviceListoriginalData = res.data
      })
    },
    showNum(doneNum ,totalNum){
      if(!doneNum){
        return '待保养'
      }
      return doneNum + '/' + totalNum
    },
    toRoomCheck(roomId){
      if(this.isStarted){
        this.$tab.navigateTo('/pages/maintenance/room-maintenance?roomId=' + roomId + '&workOrderId=' + this.workOrderId + '&hospitalId=' + this.hospitalId)
      }
    },
    starkCheck(){
      workOrderStart({workOrderId:this.workOrderId}).then(res => {
        this.startTime = res.data.startTime
        this.isStarted = true
        if(this.workOrderInfo.remark){
          this.isModalShow = true
          this.modalContent = this.workOrderInfo.remark
        }
      })
    },
    confirm(){
      if(this.roomList.every(item => {
        return item.doneNum == item.totalNum
      })){
        this.isShowMask = true
        workOrderFinish({workOrderId:this.workOrderId}).then(res => {
          this.$tab.switchTab('/pages/tabbar/maintenance/maintenance')
        }).finally(() => {
          this.isShowMask = false
        })
      }else{
        this.isModalShow = true
        this.modalContent = '尚有保养项未完成，请检查！'
      }
    }
  },
}
</script>

<style lang="scss">
page{
  background-color: #fff;
}
</style>
